/**
 * 时间：2021-06-08
 * 作者：韩万路
 * 公司：中亿丰信息
 * 名称：svg中的链接线模块
 * 功能：主要是主要模块的组件
 * 优先级:高
 */

Vue.component("canvas_svg_string", {
    data() {
        return {
            id: "",

            name: "canvas_svg_string", //当前的名称是模块的名称
            uuid: "", //动态数字名称
            parentName: "", //当前父级模块名称
            childrenName: "", //当前子集创建的模块名称

            inNode: null, //从谁的node
            toNode: null, //到谁的node
            ifs:true,

            thisData: {
                position: {
                    x: 0,
                    y: 0,
                },
                innerSize: {
                    width: 0,
                    height: 40,
                },
                parentId: "",
                text: "line",
                font_size: 16,

                path: {
                    M: {
                        x: 0,
                        y: 0,
                    },
                    Q: {
                        x: 0,
                        y: 0,
                    },
                    E: {
                        x: 0,
                        y: 0,
                    }
                }
            },


        }
    },
    template: `
 
        <g :id="computed_toUuid+'_group'"
            show="computed_toNodeShow"
            style="{opacity:computed_toNodeIsShrinkage}"
            v-if="ifs"
        >
            <!--:d="M34.5 0 Q34 -140, 80 -140" -->
            <path 
                :id="uuid" 
                class="svg_component_string"
                :d="computed_linePosition" 
                
                
                fill="none"
                marker-end="url(#kity_marker_2)" 
                />


            <!-- 复用标签s -->
            <marker id="kity_marker_2" orient="auto" refX="6" refY="0" viewBox="-40 -40 80 80"
                markerWidth="80" markerHeight="80" markerUnits="userSpaceOnUse">
                
                <circle cx="0" cy="0" r="12" stroke="black"
stroke-width="0" fill="#FFFFFF"/>
            </marker>


        </g>
    `,
    props: ["toUuid","parentId"],
    computed: {
        computed_textWidth: function() {
            //字体长度 乘以 字体大小 加上边框
            let width = this.thisData.text.length * this.thisData.font_size + (20 * 2);

            //减去字是否是英文和标点符号
            let charCodeLine = 0;
            for (let index in this.thisData.text) {
                if (this.thisData.text[index].charCodeAt() <= 200) {
                    charCodeLine++;
                }
            }
            //当前的英文标点符号乘以字体大小除以2半个字符
            width -= (charCodeLine * this.thisData.font_size) / 2;

            //外加设备信息
            width += 0;

            this.thisData.innerSize.width = width;
            return width;
        },
        computed_toUuid: function() {
            this.id = this.toUuid;

            this.fun_thisToChildren();

            return this.toUuid;
        },
        computed_linePosition: function() {




            // let inNodeData = this.inNode.thisData;
            // let toNodeData = this.toNode.thisData;
            let inNodeData = null;
            let toNodeData = null;
                inNodeData = main.requestData[main.requestData.modelType][this.toUuid].data;
                toNodeData = main.requestData[main.requestData.modelType][this.parentId].data;
                
      
            


            let path = null;

            //c
            try{
                //判断当前是否是在左边还是在右边
                
                


                let isRight = true;



                
                //只有用户才可以在右边
                // console.log("-------------------------------------inNode ",main.requestData[main.requestData.modelType][this.parentId].component);
                // console.log("-------------------------------------toNodeData ",main.requestData[main.requestData.modelType][this.toUuid].component);
                
                if(main.requestData[main.requestData.modelType][this.parentId].component == "space_component_users")
                {
                    isRight = false;
                }




                //计算当前x轴的间隔距离
                let distance = 0;
                if( inNodeData.position.x > toNodeData.position.x)
                {
                    distance = inNodeData.position.x - toNodeData.position.x;
                }else
                {
                    distance = toNodeData.position.x - inNodeData.position.x;           
                }

                if(isRight)
                {   
                    distance = distance - inNodeData.innerSize.width/2.5;

                    
                    // console.log(inNodeData.position.x , toNodeData.position.x);

                    path = {
                        M: {
                            // x:this.inNode.thisData.innerSize.width/2+this.inNode.thisData.position.x,
                            // y:this.inNode.thisData.innerSize.height/2+this.inNode.thisData.position.y,
                            x: inNodeData.innerSize.width + inNodeData.position.x,
                            y: inNodeData.innerSize.height / 2 + inNodeData.position.y,
                        },
                        Q: {
                            // x:inNodeData.innerSize.width/2+inNodeData.position.x,
                            x: inNodeData.innerSize.width + inNodeData.position.x,
                            y: toNodeData.innerSize.height / 2 + toNodeData.position.y,
                        },
                        C: {
                            // x:inNodeData.innerSize.width/2+inNodeData.position.x,
                            x1: (inNodeData.innerSize.width + ( distance/2 <= 40?distance/2:distance/2)) + inNodeData.position.x,
                            y1: inNodeData.innerSize.height / 2 + inNodeData.position.y,
                            x2: -( distance/2 <= 40?distance/2:distance/2) + toNodeData.position.x,
                            y2: toNodeData.innerSize.height / 2 + toNodeData.position.y,
                        },
                        E: {
                            x: -2 + toNodeData.position.x,
                            y: toNodeData.innerSize.height / 2 + toNodeData.position.y,
                        }
                    };
                }else
                {
                    path = {
                        M: {
                            // x:this.inNode.thisData.innerSize.width/2+this.inNode.thisData.position.x,
                            // y:this.inNode.thisData.innerSize.height/2+this.inNode.thisData.position.y,
                            x:  inNodeData.position.x,
                            y: inNodeData.innerSize.height / 2 + inNodeData.position.y,
                        },
                        C: {
                            // x:inNodeData.innerSize.width/2+inNodeData.position.x,
                            x1:  inNodeData.position.x - ( distance/2 <= 40?40:distance/2),
                            y1: inNodeData.innerSize.height / 2 + inNodeData.position.y,

                            x2: toNodeData.innerSize.width +  toNodeData.position.x + ( distance/2 <= 40?40:distance/2),
                            y2: toNodeData.innerSize.height / 2 + toNodeData.position.y,
                        },
                        E: {
                            x:toNodeData.innerSize.width + toNodeData.position.x,
                            y: toNodeData.innerSize.height / 2 + toNodeData.position.y,
                        }
                    }; 
                }
               
            }catch(e)
            {
                return "";
            }
            

            //判断是否使用toNode的测试数据
            try{
                if (this.toNode.isShrinkage != undefined) {
                    if (!this.toNode.isShrinkage) {
                        path.C.x2 = -70 + this.toNode.buffer.x;
                        path.C.y2 = toNodeData.innerSize.height / 2 + this.toNode.buffer.y;
    
                        path.E.x = -2 + this.toNode.buffer.x;
                        path.E.y = toNodeData.innerSize.height / 2 + this.toNode.buffer.y;
    
                    }
                }
                this.thisData.path = path;
            }catch(e){

            }
           




            
            // 'M'+path.M.x+' '+path.M.y+'    Q'+path.Q.x+' '+path.Q.y+', '+path.E.x+' '+path.E.y
            return 'M' + path.M.x + ' ' + path.M.y + '    C' + path.C.x1 + ' ' + path.C.y1 + ' ' + path.C.x2 + ' ' + path.C.y2 + ', ' + path.E.x + ' ' + path.E.y;
        },
        /**
         * 判断当前到谁的node节点是否显示
         */
        computed_toNodeShow: function() {
            var show1 = false;
            if (this.toNode != null) {
                // console.log("sdfasfasdfsd", this.toNode);
                if (this.toNode.isShow != undefined && this.toNode.isShow != null) {

                    show1 = this.toNode.isShow;
                }


                //判断到谁的节点当前是否被删除了
                show1 = this.toNode.thisData.thisDelete ? false : show1;
            }
            // show = true;




            return show1;
        },
        computed_toNodeIsShrinkage: function() {

            if (this.toNode != null) {
                console.log(this.toNode);
                return this.toNode.isShrinkage ? this.toNode.buffer.opacity : '1';
            }
            return '1';
        }
    },
    methods: {

        /**
         * 获取数据
         */
        fun_getData() {
            return this.thisData;
        },
        /**
         * 插入数据
         */
        fun_setData() {

        },
        /**
         * 发送当前的this到外部
         */
        fun_thisToChildren: function() {
            this.$emit('increase', this);
        },

        fun_test: function() {
            // console.log("fun士大夫大师傅士大夫但是");

        }
    },
    created() {
        // console.log("sdfsdfsdfsdfsd");
        this.fun_test();
        // setTimeout(() => {

        //     // console.log(this.inNode.thisData, this.toNode.thisData);

        // }, 1000);
    }

})